<template>
  <div class="stationMonitor" v-loading="stationLoading">
    <div class="statisticsCnt">
      <mapStatistics />
    </div>
    <div class="mapTable">
      <div class="mapBox" id="mapBox">
        <div class="map" id="map"></div>
        <div class="legend">
          <div class="item">
            <span class="imgBox" style="background: #055eff"></span>
            <span>达标</span>
          </div>
          <div class="item">
            <span class="imgBox" style="background: #ef353e"></span>
            <span>超标</span>
          </div>
          <div class="item">
            <span class="imgBox" style="background: #595959"></span>
            <span>无水</span>
          </div>
          <div class="item">
            <span class="imgBox" style="background: #ff9800"></span>
            <span>维护</span>
          </div>
        </div>
        <div
          class="legendRight"
          v-if="
            this.monitorData &&
            this.monitorData.pollutions &&
            this.monitorData.pollutions.length > 0
          "
        >
          <div class="item">
            <span class="imgBox" style="background: #e4007f"></span>
            <span>电镀</span>
          </div>
          <div class="item">
            <span class="imgBox" style="background: #8974d5"></span>
            <span>线路板</span>
          </div>
          <div class="item">
            <span class="imgBox" style="background: #00a0e9"></span>
            <span>酸洗磷化</span>
          </div>
          <div class="item">
            <span class="imgBox" style="background: #282828"></span>
            <span>危废处置</span>
          </div>
          <div class="item">
            <span class="imgBox" style="background: #ff9800"></span>
            <span>其他</span>
          </div>
        </div>
        <!-- <div id="real" @click="showReal">{{isShowReal?'收起实时数据':'展开实时数据'}}</div> -->
        <div class="circle" id="real">
          <div
            :class="['item', showTable === 'oneHour' ? 'active' : '']"
            @click="showReal('oneHour')"
          >
            一小时数据
          </div>
          <div
            :class="['item', showTable === 'hour' ? 'active' : '']"
            @click="showReal('hour')"
          >
            两小时数据
          </div>
          <div
            :class="['item', showTable === 'minute' ? 'active' : '']"
            @click="showReal('minute')"
          >
            分钟数据
          </div>
          <!-- <i class="el-icon-arrow-left"></i> -->
        </div>
        <div class="search">
          <div class="search-input">
            <i class="el-icon-search"></i>
            <el-input
              v-model="scname"
              placeholder="请输入站点或监测车名称"
              @input="showStation"
            ></el-input>
            <i
              class="el-icon-close"
              v-if="scname.length > 0"
              @click="scname = ''"
            ></i>
          </div>
          <div class="search-list" v-if="filterList.length > 0">
            <div
              class="search-item"
              v-for="item in filterList"
              :key="item.id"
              @click="openSearchItem(item)"
            >
              <span v-if="item.innerText">{{ item.stationShorthand }}</span>
              <span v-else-if="item.waterstation">{{ item.waterstation }}</span>
              <span v-else>{{ item.name }}</span>
            </div>
          </div>
          <div
            class="search-nodata"
            v-if="filterList == 0 && scname.length > 0"
          >
            暂无搜索站点
          </div>
        </div>
        <!-- <warningPanel /> -->
      </div>
      <div class="analysisCnt" id="analysisCnt">
        <analysisCnt
          :monitorData="monitorData"
          :dataTypeShow="showTable"
          v-if="showTable === 'hour' || showTable === 'oneHour'"
        />
        <!-- <analysisCnt :monitorData="monitorData" v-if="showTable === 'oneHour'" /> -->
        <analysisCntMinute
          :monitorData="monitorData"
          v-if="showTable === 'minute'"
        />
      </div>
    </div>
    <el-dialog
      :visible.sync="isHandledVisible"
      custom-class="warningAdmin"
      append-to-body
    >
      <div slot="title">
        <p>处理结果</p>
      </div>
      <el-form
        :model="curIsHandledDetail"
        disabled
        size="mini"
        label-width="100px"
      >
        <el-form-item label="处理描述">
          <el-input
            type="textarea"
            :rows="4"
            v-model="curIsHandledDetail.processingMark"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="现场图片"
          label-width="100px"
          style="margin-top: 15px"
        >
          <viewer :images="curIsHandledDetail.imgList">
            <img
              class="imgItem"
              v-for="(item, index) of curIsHandledDetail.imgList"
              :key="index"
              :src="'http://47.112.16.168:' + item"
            />
          </viewer>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="处理人">
              <el-input
                v-model="curIsHandledDetail.processingPerson"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
        <el-form-item label="处理时间">
          <el-input v-model="curIsHandledDetail.gmtModified"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <mindFrame
      :src="mindFrameUrl"
      :title="title"
      :show="mindFrameIsShow"
      :closeEvent="frameClose"
    ></mindFrame>
    <!-- <mindFrame src="http://192.168.50.68:9527/" :title="title" :show="mindFrameIsShow" :closeEvent="frameClose"></mindFrame> -->
  </div>
</template>

<script>
/* eslint-disable */
let carWebsocket;
import MapLoader from "../plugins/AMap.js";
import Vue from "vue/dist/vue.esm.js";
import { mapActions, mapGetters } from "vuex";
import mapStatistics from "../components/mapStatistics";
import analysisCnt from "../components/analysisCnt";
import analysisCntMinute from "../components/analysisCntMinute";
import warningPanel from "../components/warningPanel";
import mindFrame from "@/components/mindFrame";
import { socketUrl } from "../plugins/url";
import common from "@/plugins/common";
import { bimUrl } from "@/plugins/url";
export default {
  name: "stationMonitor",
  components: {
    mapStatistics,
    warningPanel,
    mindFrame,
    analysisCnt,
    analysisCntMinute,
  },
  data() {
    return {
      showTable: null,
      msg: "hello stationMonitor",
      stationLoading: true,
      map: null,
      tableColW: "",
      mapBoxFlag: true,
      carMarkerCreateFlag: false,
      carMarker: null,
      passedArr: [],
      passedLine: null,
      polyline: null,
      carPointDatas: [],
      common,
      warnCntVisible: false,
      curWarnCntDetail: {
        station: "",
        time: "",
        content: [],
      },
      isHandledVisible: false,
      curIsHandledDetail: {},
      mindFrameIsShow: false,
      mindFrameUrl: "",
      title: "",
      isShowReal: false,
      scname: "",
      infoWindow: null,
      filterList: [],
      infoWindowPosition: null,
    };
  },
  methods: {
    // 实时搜索点位展示
    tableMapSize() {},
    showStation(e) {
      if (e.length === 0) {
        this.filterList = [];
      } else {
        var arr = [];
        arr = this.monitorData.data.concat(
          this.monitorData.pollutions,
          this.monitorData.oneHourData
        );
        let reg = new RegExp("^.*" + e + ".*$");
        arr.forEach((data) => {
          if (
            data.innerText &&
            data.stationShorthand &&
            data.stationShorthand.match(reg)
          ) {
            this.filterList.push(data);
          } else if (data.waterstation && data.waterstation.match(reg)) {
            this.filterList.push(data);
          } else if (data.name && data.name.match(reg)) {
            this.filterList.push(data);
          }
        });
      }
    },
    // // 点击点位展示对应弹窗
    openSearchItem(item) {
      let template;
      if (item.systemName) {
        let realData = {};
        var arr = this.monitorData.realdata.concat(
          this.monitorData.oneHourData
        );
        realData = arr.find((data) => {
          return item.systemName === data.cycleEquipment;
        });
        template = this.templateStation(item, realData);
        let myComponent = Vue.extend({
          template: template,
          name: "infoWindowContent2",
          data() {
            return { curPoint: item };
          },
          methods: {
            // 设置文本颜色
            isEffective(factor, value, status, waterInfo, factorLimit) {
              value = Number(value);
              if (waterInfo) {
                if (waterInfo === "无水") {
                  return "#606266";
                } else {
                  switch (Number(status)) {
                    case 0:
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                    case 8:
                    case 10:
                      return "#606266";
                    case 9:
                      return "#e53139";
                    default:
                      break;
                  }
                }
              } else {
                if (value) {
                  if (factor === "ph") {
                    if (
                      this.standard["ph"].split("~")[0] <
                      value <
                      this.standard["ph"].split("~")[1]
                    ) {
                      return "#606266";
                    } else {
                      return "#e53139";
                    }
                  } else {
                    if (this.standard[factor] > value) {
                      return "#606266";
                    } else {
                      return "#e53139";
                    }
                  }
                } else {
                  return "#606266";
                }
              }
            },
            // 设置文本值
            validation(factor, value, status, waterInfo, factorLimit) {
              value = Number(value);
              if (waterInfo) {
                if (waterInfo === "无水") {
                  return "无水";
                } else {
                  switch (Number(status)) {
                    case 0:
                    case 3:
                    case 5:
                    case 7:
                    case 10:
                      return "维护";
                    case 1:
                      return value.toFixed(3);
                    case 4:
                      return factorLimit;
                    case 8:
                      return "";
                    case 9:
                      return value.toFixed(3);
                    default:
                      break;
                  }
                }
              } else {
                if (value) {
                  return value.toFixed(3);
                } else {
                  return "";
                }
              }
            },
            //设置站点类型
            stationTitle(curPoint) {
              switch (curPoint.stationType) {
                case 1:
                  if (curPoint.statisticType === 0) {
                    return "两小时数据：";
                  } else {
                    return "一小时数据：";
                  }
                case 2:
                  return "两小时数据：";
                case 3:
                  if (
                    curPoint.statisticType === 0 ||
                    curPoint.statisticType === 1
                  ) {
                    return "两小时数据：";
                  } else {
                    return "一小时数据：";
                  }
              }
            },
            /* 设置站点名称 */
            setstation(curPoint) {
              if (curPoint.innerText) {
                return curPoint.stationShorthand;
              } else {
                return curPoint.waterstation;
              }
            },
          },
        });
        let infoWindowContent = new myComponent().$mount();
        this.infoWindow.setContent(infoWindowContent.$el);
      } else {
        let realData = {};
        realData = this.monitorData.pollutions.find((data) => {
          return item.name === data.name;
        });
        var content = null;
        if (realData.pollutionFactor.length > 0) {
          content = `<div style="padding: 5px;line-height:26px;">
                            <p><strong>企业名称：</strong>${realData.name}</p>
                            <p><strong>污染因子：</strong>${realData.pollutionFactor}</p>
                          </div>`;
        } else {
          content = `<div style="padding: 5px;line-height:26px;">
                            <p><strong>企业名称：</strong>${realData.name}</p>
                            <p><strong>污染因子：</strong>无</p>
                          </div>`;
        }
        this.infoWindow.setContent(content);
      }
      var position = new AMap.LngLat(item.longitude, item.latitude);
      this.infoWindow.open(this.map, position);
      this.isShowReal = false;
      this.scname = "";
      this.filterList = [];
    },
    // // 展示实时数据的按钮
    showReal(type) {
      if (
        this.showTable &&
        this.showTable.length > 0 &&
        this.showTable === type
      ) {
        this.isShowReal = !this.isShowReal;
      } else {
        this.isShowReal = true;
      }
      this.showTable = type;
      var mapBox = document.getElementById("mapBox");
      var analysisCnt = document.getElementById("analysisCnt");
      var real = document.getElementById("real");
      if (this.isShowReal) {
        mapBox.style.width = "calc(30%)";
        analysisCnt.style.display = "inline-block";
        // real.style.transform = "rotate(180deg)";
      } else {
        real.style.transform = "rotate(0deg)";
        mapBox.style.width = "calc(100%)";
        analysisCnt.style.display = "none";
      }
    },
    ...mapActions(["getStationData", "fetchWarningAdminList"]),
    // 站点点位标记
    drawStation(AMap) {
      let that = this;
      let markers = [];
      let points = [];
      let district = null;
      AMap.plugin(["AMap.ToolBar", "AMap.MarkerClusterer"], function () {});
      if (this.monitorData.oneHourData) {
        points = this.monitorData.data.concat(this.monitorData.oneHourData);
      } else {
        points = this.monitorData.data;
      }
      let pointsLen = points.length;
      let infoWindow = null;
      let marker = null;
      for (let i = 0; i < pointsLen; i++) {
        let curPoint = points[i];
        if (curPoint.longitude && curPoint.latitude) {
          marker = new AMap.Marker({
            position: [curPoint.longitude, curPoint.latitude],
            icon: new AMap.Icon({
              image: this.getIcon(curPoint),
              // image:
              //   curPoint.stationType === 1
              //     ? "/img/main_map_ btn_db.svg"
              //     : "/img/main_map_ btn_jccart.svg",
              size: new AMap.Size(26, 30), //图标大小
            }),
            offset: new AMap.Pixel(-13, -30),
          });
          infoWindow = new AMap.InfoWindow({
            anchor: "bottom-center",
            offset: new AMap.Pixel(0, -30),
          });
          let infoWindowPosition = marker.getPosition();
          let realData = {};
          realData = this.monitorData.realdata.find((data) => {
            return curPoint.systemName === data.cycleEquipment;
          });
          let templateStr = this.templateStation(curPoint, realData);
          let myComponent = Vue.extend({
            template: templateStr,
            name: "infoWindowContent2",
            data() {
              return { curPoint };
            },
            methods: {
              // 设置文本颜色
              isEffective(factor, value, status, waterInfo, factorLimit) {
                value = Number(value);
                if (waterInfo) {
                  if (waterInfo === "无水") {
                    return "#606266";
                  } else {
                    switch (Number(status)) {
                      case 0:
                      case 1:
                      case 3:
                      case 5:
                      case 7:
                      case 8:
                      case 10:
                        return "#606266";
                      case 9:
                        return "#e53139";
                      default:
                        break;
                    }
                  }
                } else {
                  if (value) {
                    if (factor === "ph") {
                      if (
                        this.standard["ph"].split("~")[0] <
                        value <
                        this.standard["ph"].split("~")[1]
                      ) {
                        return "#606266";
                      } else {
                        return "#e53139";
                      }
                    } else {
                      if (this.standard[factor] > value) {
                        return "#606266";
                      } else {
                        return "#e53139";
                      }
                    }
                  } else {
                    return "#606266";
                  }
                }
              },
              // 设置文本值
              validation(factor, value, status, waterInfo, factorLimit) {
                value = Number(value);
                if (waterInfo) {
                  if (waterInfo === "无水") {
                    return "无水";
                  } else {
                    switch (Number(status)) {
                      case 0:
                      case 3:
                      case 5:
                      case 7:
                      case 10:
                        return "维护";
                      case 1:
                        return value.toFixed(3);
                      case 4:
                        return factorLimit;
                      case 8:
                        return "";
                      case 9:
                        return value.toFixed(3);
                      default:
                        break;
                    }
                  }
                } else {
                  if (value) {
                    return value.toFixed(3);
                  } else {
                    return "";
                  }
                }
              },
              //设置站点类型
              stationTitle(curPoint) {
                switch (curPoint.stationType) {
                  case 1:
                    if (curPoint.statisticType === 0) {
                      return "两小时数据：";
                    } else {
                      return "一小时数据：";
                    }
                  case 2:
                    return "两小时数据：";
                  case 3:
                    if (
                      curPoint.statisticType === 0 ||
                      curPoint.statisticType === 1
                    ) {
                      return "两小时数据：";
                    } else {
                      return "一小时数据：";
                    }
                }
              },
              /* 设置站点名称 */
              setstation(curPoint) {
                if (curPoint.innerText) {
                  return curPoint.stationShorthand;
                } else {
                  return curPoint.waterstation;
                }
              },
            },
          });
          let infoWindowContent = new myComponent().$mount();
          marker.on("mouseover", (e) => {
            infoWindow.setContent(infoWindowContent.$el);
            infoWindow.open(that.map, infoWindowPosition);
          });
          marker.on("mouseout", (e) => {
            infoWindow.close();
          });
          this.infoWindowPosition = infoWindowPosition;
          this.infoWindow = infoWindow;
          markers.push(marker);
        }
      }
      that.map.add(markers);
    },
    /* 企业点位标记 */
    businessStation(AMap) {
      let that = this;
      let markers = [];
      let district = null;
      let points = this.monitorData.pollutions;
      AMap.plugin(["AMap.ToolBar", "AMap.MarkerClusterer"], function () {});
      let pointsLen = points.length;
      let infoWindow = null;
      let marker = null;
      for (let i = 0; i < pointsLen; i++) {
        let curPoint = points[i];
        if (curPoint.longitude && curPoint.latitude) {
          marker = new AMap.Marker({
            position: [curPoint.longitude, curPoint.latitude],
            icon: new AMap.Icon({
              image: this.getBusinessIcon(curPoint),
              size: new AMap.Size(21, 21), //图标大小
            }),
            offset: new AMap.Pixel(-13, -30),
          });
          infoWindow = new AMap.InfoWindow({
            anchor: "bottom-center",
            offset: new AMap.Pixel(0, -30),
          });
          let infoWindowPosition = marker.getPosition();
          marker.on("mouseover", (e) => {
            var content = null;
            if (curPoint.pollutionFactor.length > 0) {
              content = `<div style="padding: 5px;line-height:26px;">
                            <p><strong>企业名称：</strong>${curPoint.name}</p>
                            <p><strong>污染因子：</strong>${curPoint.pollutionFactor}</p>
                          </div>`;
            } else {
              content = `<div style="padding: 5px;line-height:26px;">
                            <p><strong>企业名称：</strong>${curPoint.name}</p>
                            <p><strong>污染因子：</strong>无</p>
                          </div>`;
            }
            infoWindow.setContent(content);
            infoWindow.open(that.map, infoWindowPosition);
          });
          marker.on("mouseout", (e) => {
            infoWindow.close();
          });
          this.infoWindowPosition = infoWindowPosition;
          this.infoWindow = infoWindow;
          markers.push(marker);
        }
      }
      that.map.add(markers);
    },
    mapInit() {
      let that = this;
      MapLoader().then(
        (AMap) => {
          that.map = new AMap.Map("map", {
            // center: [117.000923, 36.675807],
            // mapStyle: 'amap://styles/whitesmoke',
            mapStyle: "amap://styles/b23dc72b03be03f4dd932c413bc85c94",
            center: [113.850234, 22.673635],
            zoom: 11,
            zooms: [11, 18],
          });
          // that.map.setMapStyle('amap://styles/b23dc72b03be03f4dd932c413bc85c94');
          that.map.on("click", (e) => {
            that.map.clearInfoWindow();
            if (this.isShowReal === true) {
              this.showReal(this.showTable);
            }
          });
          that.drawStation(AMap);
          that.businessStation(AMap);
        },
        (e) => {}
      );
    },
    // 站点弹窗口模板
    templateStation(curPoint, realData) {
      var html = "";
      var htmlReal = "";
      var innerHtml = "";
      let arr = {};
      let factoryHtml = "";

      arr = this.monitorData.outletDataList.find((data) => {
        if (curPoint.systemName === data.inletSystem) {
          curPoint.innerText = "进水口";
          return data;
        }
      });
      console.log(curPoint, realData, arr);
      this.monitorData.factorField.forEach((item) => {
        if (
          curPoint.mapWaterQuality &&
          curPoint[this.monitorData.factorStatus[item.devStatus]] !== 8
        ) {
          html += `<span :style="{'color': isEffective(
                        '${item.prop}',
                        '${curPoint[item.prop]}',
                        '${
                          curPoint[
                            this.monitorData.factorStatus[item.devStatus]
                          ]
                        }',
                        '${curPoint.mapWaterQuality}',
                        '${item.factorLimit}'
                    ),'width':'50%','display':'inline-block','font-size':'12px'}"
                  >${item.devStatus}:{{validation(
                        '${item.prop}',
                        '${curPoint[item.prop]}',
                        '${
                          curPoint[
                            this.monitorData.factorStatus[item.devStatus]
                          ]
                        }',
                        '${curPoint.mapWaterQuality}',
                        '${item.factorLimit}'
                  )}}</span>`;
        }
      });
      if (realData) {
        htmlReal = `
          <p class="factorSapn">
            <strong>分钟数据：</strong>
            <strong>${realData.datatime}</strong>
          </p>
           <p>
            <span :style="{'color': isEffective( 'ph', '${realData.ph}','${
          realData.devicePh
        }', '${realData.mapWaterQuality}', '0'
                    ),'width':'48%','display':'inline-block','font-size':'12px'}">pH:{{validation(
                        'ph',
                        '${realData.ph}',
                        '${realData.devicePh}',
                        '${realData.mapWaterQuality}',
                        '0.01L'
                  )}}
            </span>
            <span v-if="${
              realData.cycleEquipment &&
              realData.cycleEquipment.slice(0, 2) !== "AZ"
            }" :style="{'color': isEffective( 'orp', '${realData.orp}','${
          realData.deviceOrp
        }', '${realData.waterQuality}', '0'
                    ),'width':'48%','display':'inline-block','font-size':'12px'}">ORP:{{validation(
                        'orp',
                        '${realData.orp}',
                        '${realData.deviceOrp}',
                        '${realData.mapWaterQuality}',
                        '0.01L'
                  )}}
            </span>
           </p>
        `;
      }
      if (arr && Object.keys(arr).length > 0) {
        this.monitorData.factorField.forEach((item) => {
          if (
            arr.mapWaterQuality &&
            arr[this.monitorData.factorStatus[item.devStatus]] !== 8
          ) {
            factoryHtml += `
            <span :style="{'color': isEffective(
                        '${item.prop}',
                        '${arr[item.prop]}',
                        '${arr[this.monitorData.factorStatus[item.devStatus]]}',
                        '${arr.mapWaterQuality}',
                        '${item.factorLimit}'
                    ),'width':'49%','display':'inline-block','font-size':'12px'}"
                  >${item.devStatus}:{{validation(
                        '${item.prop}',
                        '${arr[item.prop]}',
                        '${arr[this.monitorData.factorStatus[item.devStatus]]}',
                        '${arr.mapWaterQuality}',
                        '${item.factorLimit}'
                  )}}</span>
            
          `;
          }
        });
        innerHtml += `
         
          <p class="factorSapn">
                <strong>出水口{{stationTitle(${JSON.stringify(arr)})}}</strong>
                <strong>${arr.gmtMonitor}</strong>
            </p>
            <p><strong>水质状态：</strong><span style="color: ${
              arr.mapWaterQuality === "超标" ? "#ff8484" : "#666"
            }">${arr.mapWaterQuality}</span>
            </p>
           <p>
           ${factoryHtml}
           </p>
          
        `;
      }

      let templateStr = `
          <div style="padding: 5px;line-height:26px;">
            <p><strong>水站名称：</strong>{{setstation(curPoint)}}</p>
            <p><strong>设备系统号：</strong>${curPoint.systemName}</p>
            <p v-if="!curPoint.innerText"><strong>水质状态：</strong><span style="color: ${
              curPoint.mapWaterQuality === "超标" ? "#ff8484" : "#666"
            }">${curPoint.mapWaterQuality}</span></p>
             <p style="line-height: 20px;"><strong>详细地址：</strong>${
               curPoint.address || "暂无"
             }</p>
              ${htmlReal}
             
              <p class="factorSapn">
                 <strong>${
                   curPoint.innerText ? curPoint.innerText : ""
                 }{{stationTitle(curPoint)}}</strong>
                 <strong>${curPoint.gmtMonitor}</strong>
              </p>
               <p v-if="curPoint.innerText"><strong>水质状态：</strong><span style="color: ${
                 curPoint.mapWaterQuality === "超标" ? "#ff8484" : "#666"
               }">${curPoint.mapWaterQuality}</span>
              </p>
              <p>${html}</p>
              ${innerHtml}
            </div>
        `;
      return templateStr;
    },
    // 获取站点图标
    getIcon(curPoint) {
      if (curPoint.stationType === 1 || curPoint.stationType === 3) {
        switch (curPoint.mapWaterQuality) {
          case "达标":
            return "/img/main_map_ btn_db.svg";
          case "超标":
            return "/img/main_map_ btn_cb.svg";
          case "维护":
            return "/img/main_map_ btn_wh.svg";
          case "无水":
            return "/img/main_map_ btn_wu.svg";
          default:
            break;
        }
      } else {
        switch (curPoint.mapWaterQuality) {
          case "达标":
            return "/img/main_map_ btn_jccart.svg";
          case "超标":
            return "/img/main_map_ btn_cbcar.svg";
          case "维护":
            return "/img/main_map_ btn_whcar.svg";
          case "无水":
            return "/img/main_map_ btn_wscar.svg";
          default:
            break;
        }
      }
    },
    /*获取企业点位图标*/
    getBusinessIcon(curPoint) {
      switch (curPoint.type) {
        case "其他":
          return "/img/main_map_ btn_qyqt.png";
        case "线路板":
          return "/img/main_map_ btn_qyxl.png";
        case "酸洗磷化":
          return "/img/main_map_ btn_qysx.png";
        case "危险处置":
          return "/img/main_map_ btn_qywf.png";
        default:
          return "/img/main_map_ btn_qydd.png";
          break;
      }
    },
    initWebsocket() {
      // let socketUrl = 'ws://47.112.16.168:8802/websocket/'
      // let socketUrl = 'ws://192.168.50.151:8802/websocket/'
      // let socketUrl = 'ws://192.168.50.77:8802/websocket/'
      carWebsocket = new WebSocket(socketUrl + this.userInfo.user.account);
      carWebsocket.onopen = (event) => {};
      carWebsocket.onerror = (event) => {};
      carWebsocket.onmessage = (event) => {
        let message = JSON.parse(event.data);
        // debugger
        if (message.type === "jingwei") {
          let dataList = message.pushMessage;
          let dataListLen = dataList.length;
          if (dataListLen > 1) {
            if (!this.carMarkerCreateFlag) {
              this.initCar([
                dataList[dataListLen - 2].lng,
                dataList[dataListLen - 2].lat,
              ]);
            }
            this.moveCar([
              dataList[dataListLen - 1].lng,
              dataList[dataListLen - 1].lat,
            ]);
            this.initPassedLine(dataList);
          } else if (dataListLen === 1) {
            if (!this.carMarkerCreateFlag) {
              this.initCar([dataList[0].lng, dataList[0].lat]);
            }
            this.moveCar([dataList[0].lng, dataList[0].lat]);
          }
        }
        if (message.type === "point") {
          this.drawCarPointData(message.pushMessage);
        }
      };
    },
    drawCarPointData(pointList) {
      let position,
        map = this.map;
      let infoWindow;
      for (let i = 0; i < pointList.length; i++) {
        let curPoint = pointList[i];
        position = [curPoint.longitude, curPoint.latitude];
        this.carPoint = new AMap.Marker({
          position: position,
          icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          offset: new AMap.Pixel(-26, -68),
        });
        infoWindow = new AMap.InfoWindow({
          anchor: "middle-left",
        });
        let infoWindowPosition = this.carPoint.getPosition();
        this.carPoint.on("click", (e) => {
          infoWindow.setContent(`
            <p><strong>点位名称：</strong>${curPoint.pollutantName}</p>
            <p><strong>车辆编号：</strong>${curPoint.vehicle}</p>
            <p><strong>时间：</strong>${curPoint.lastMonitor}</p>
            <p><strong>pH：</strong>${curPoint.ph}</p>
            <p><strong>氨氮：</strong>${curPoint.ammoniaNitrogen} mg/L</p>
            <p><strong>总铬：</strong>${curPoint.chromium} mg/L</p>
            <p><strong>CODcr：</strong>${curPoint.cod} mg/L</p>
            <p><strong>总铜：</strong>${curPoint.cuprum} mg/L</p>
            <p><strong>总镍：</strong>${curPoint.nickel} mg/L</p>
            <p><strong>总氮：</strong>${curPoint.nitrogen} mg/L</p>
            <p><strong>总磷：</strong>${curPoint.phosphorus} mg/L</p>
            <p><strong>总氰化物：</strong>${curPoint.prussiate} mg/L</p>
            <p><strong>污染指数：</strong>${curPoint.pollutionIndex.toFixed(
              2
            )}</p>
          `);
          infoWindow.open(map, infoWindowPosition);
        });
        this.carPointDatas.push(this.carPoint);
      }
      map.add(this.carPointDatas);
    },
    drawLine(path) {
      let map = this.map;

      for (let i = 0; i < path.length; i++) {
        this.passedArr.push([path[i].lng, path[i].lat]);
      }
      this.passedArr = this.unique(this.passedArr);
      if (this.polyline) {
        map.remove(this.polyline);
      }
      this.polyline = new AMap.Polyline({
        map: map,
        showDir: true,
        // strokeColor: "#AF5",  //线颜色
        strokeColor: "#139e79", //线颜色
        strokeOpacity: 0.8, //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      });
      // this.polyline.setExtData({extPath: path})
      // this.polyline.setMap(map)
      // this.polyline.setPath(JSON.parse(JSON.stringify(path)))
      this.polyline.setPath(JSON.parse(JSON.stringify(this.passedArr)));
      // map.setFitView()
    },
    initPassedLine(dataList) {
      let lineArr = [];
      for (let i = 0; i < dataList.length; i++) {
        lineArr.push([dataList[i].lng, dataList[i].lat]);
      }
      this.passedLine = new AMap.Polyline({
        map: this.map,
        path: lineArr,
        showDir: true,
        // strokeColor: "#AF5",  //线颜色
        strokeColor: "#139e79", //线颜色
        strokeOpacity: 0.8, //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
      });
    },
    initCar(position) {
      this.carMarker = new AMap.Marker({
        map: this.map,
        position: position,
        icon: "/img/vehicle.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90,
      });
      // this.carMarker.setMap(this.map)
      // this.carMarker.setPosition(position)
      this.carMarker.on("moving", (e) => {
        // this.passedLine.setPath(e.passedPath);
        this.drawLine(e.passedPath);
      });
      this.carMarkerCreateFlag = true;
      // debugger
      // this.map.setFitView(this.carMarker)
    },
    moveCar(lnglat) {
      // new Promise((resolve, reject) => {
      //   try {
      this.carMarker.moveTo(new AMap.LngLat(...lnglat), 200);
      //     resolve(value);
      //   } catch {
      //     reject(error);
      //   }
      // })
    },
    moveCarAlong(dataList) {
      let lineArr = [];
      for (let i = 0; i < dataList.length; i++) {
        lineArr.push([dataList[i].lng, dataList[i].lat]);
      }
      this.carMarker.moveAlong(lineArr, lineArr.length * 2);
    },
    unique(array) {
      var temp = [];
      var json = {};
      for (var i = 0; i < array.length; i++) {
        if (!json[array[i]]) {
          temp.push(array[i]);
          json[array[i]] = 1;
        }
      }
      return temp;
    },
    clearCarOnMap() {
      if (this.carMarkerCreateFlag) {
        this.carMarkerCreateFlag = false;
        this.map.remove(this.carPointDatas);
        this.map.remove([this.carMarker, this.polyline, this.passedLine]);
        this.passedArr = [];
        this.carMarker = null;
        this.passedLine = null;
        this.polyline = null;
      }
    },
    async initData() {
      this.stationLoading = true;
      await this.getStationData();
      this.stationLoading = false;
    },

    frameClose(flag) {
      this.mindFrameIsShow = flag;
    },
  },
  async mounted() {
    this.stationLoading = true;
    await this.initData();
    this.mapInit();
    this.stationLoading = false;
  },
  created() {
    this.initWebsocket();
    if (document.documentElement.clientWidth < 1600) {
      this.tableColW = 80;
    } else {
      this.tableColW = "";
    }
  },
  computed: {
    ...mapGetters({
      userInfo: "getUserInfo",
      onlineCarSatatus: "getOnlineCarSatatus",
      warningAdmin: "getWarningAdmin",
      monitorData: "getMonitorData",
    }),
  },
  watch: {
    onlineCarSatatus: {
      handler(newVal, oldVal) {
        if (!newVal) {
          carWebsocket.close();
          this.clearCarOnMap();
        }
      },
    },
  },
  beforeRouteLeave(to, form, next) {
    if (this.isShowReal === true) {
      this.showReal(this.showTable);
      this.showTable = null;
    }
    next();
  },
  beforeDestroy() {
    carWebsocket.close();
    this.clearCarOnMap();
  },
};
</script>

<style scoped lang="scss">
.mapTable {
  display: flex;
  align-items: center;
}
.search {
  position: absolute;
  z-index: 100;
  left: 20px;
  top: 20px;
  cursor: pointer;
  .search-input {
    display: flex;
    align-items: center;
    background: #fff;
    width: 240px;
    border-radius: 50px;
    height: 32px;
    opacity: 0.9;
    line-height: 32px;
    .el-icon-search {
      display: inline-block;
      margin-left: 10px;
    }
  }
  .search-list {
    background: #fff;
    width: 240px;
    margin-top: 5px;
    min-height: 200px;
    max-height: 580px;
    overflow-y: auto;
    box-sizing: border-box;
    .search-item {
      line-height: 40px;
      cursor: pointer;
      padding: 0px 20px;
    }
    .search-item:hover {
      background: #f8f8f8;
    }
  }
  .search-nodata {
    background: #fff;
    width: 240px;
    margin-top: 5px;
    min-height: 100px;
    line-height: 100px;
    box-sizing: border-box;
    font-size: 16px;
    text-align: center;
  }
}
#real {
  // position: absolute;
  // border-radius: 50%;
  // text-align: center;
  // line-height: 100px;
  // cursor: pointer;
  // color: #fff;
  // top: 50%;
  // right: 0;
  // transform: translateY(-50%);
  // width: 100px;
  // height: 100px;
  // background: #1e87f0;
}
.circle {
  z-index: 100;
  position: absolute;
  right: 0px;
  top: 24%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .item {
    width: 24px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background-color: #9bd3ff;
    border-radius: 10px 0 0 10px;
    border: 1px solid #fff;
    box-shadow: 0px 0px 4px rgba(0, 13, 48, 0.15);
    text-align: center;
    color: #518ab8;
    cursor: pointer;
    // transform: translateY(-40%);
    // transform: rotate(0deg);
    // transition: 0.2s ease;
  }
  .active {
    color: #fff;
    background-color: #4eb2ff;
  }
}
// .circle:hover {
//   background-color: #2080db;
// }
.stationMonitor {
  position: relative;
  height: 100%;
}
.stationMonitor .title {
  position: relative;
  color: #666;
  line-height: 50px;
  font-size: 18px;
  font-weight: bold;
}
/* 
.monitorList {
  position: relative;
  padding: 0 35px 35px 35px;
  background-color: rgba(255, 255, 255, 0.9);
  transition: .3s ease-in;
  z-index: 3;
  transform: translateY(-100%)
}
.monitorList.isOpen {
  transform: translateY(0)
}
.monitorList.isOpen .mapBtn::after {
  transform: rotate(180deg);
} */

#mapBox {
  display: inline-block;
  vertical-align: top;
  width: calc(100%);
  /* width: 100%; */
  height: calc(100vh - 50px - 20px - 120px - 12px - 20px);
  transition: width 0.1s ease;
}
#analysisCnt {
  /* display: inline-block; */
  display: none;
  vertical-align: top;
  width: calc(70%);
  /* width: 100%; */
  height: calc(100vh - 50px - 20px - 120px - 12px - 20px);
}
@media (max-width: 1400px) {
  #analysisCnt {
    height: calc(100vh - 50px - 20px - 102px - 12px - 20px);
  }
  #mapBox {
    height: calc(100vh - 50px - 20px - 102px - 12px - 20px);
  }
}
.mapBox {
  /* position: absolute;
  top: -100%;
  width: 100%;
  height: 100%;
  transition: .8s ease-in-out;
  box-shadow: 0px 0px 8px 2px rgba(0, 11, 36, 0.47); */
  position: relative;
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  padding: 4px;
  border-radius: 4px;
  box-sizing: border-box;
}
.mapBox .map {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: #f5f5f5;
}
.mapBox .mapBtn {
  position: absolute;
  top: -32px;
  left: 50%;
  margin-left: -72px;
  z-index: 3;
}
.mapBox .mapBtn::after {
  content: "";
  position: absolute;
  top: 28%;
  left: 50%;
  margin-left: -12px;
  border-width: 12px 12px 0;
  border-style: solid;
  border-color: #04a9f3 transparent transparent; /*灰 透明 透明 */
  transform: rotate(0deg);
  transform-origin: center 6px;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}

.legend {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 3;
  padding: 8px 8px 0px;
  width: 280px;
  background: #fff;
  border-radius: 8px;
  border-radius: 4px;
  box-shadow: 1px 1px 10px -5px #666;
}

.legend .item {
  height: 28px;
  line-height: 28px;
  margin-bottom: 10px;
  font-size: 12px;
  margin-right: 20px;
  display: flex;
  align-items: center;
}
.legend .item .imgBox {
  display: inline-block;
  text-align: center;
  margin-right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.legend .item:nth-last-child(1) {
  margin-right: 0px;
}
.legend .item img {
  height: 22px;
  vertical-align: middle;
}
.legendRight {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 3;
  padding: 8px 8px 0px;
  width: 400px;
  background: #fff;
  border-radius: 8px;
  border-radius: 4px;
  box-shadow: 1px 1px 10px -5px #666;
}
.legendRight .item {
  height: 28px;
  line-height: 28px;
  margin-bottom: 10px;
  font-size: 12px;
  margin-right: 20px;
  display: flex;
  align-items: center;
}
.legendRight .item .imgBox {
  display: inline-block;
  text-align: center;
  margin-right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.legendRight .item:nth-last-child(1) {
  margin-right: 0px;
}
.legendRight .item img {
  height: 22px;
  vertical-align: middle;
}
.statisticsCnt {
  width: 100%;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 12px;
}
.floatPosition {
  right: 10%;
}
.warningAdmin .imgItem {
  max-width: 200px;
  margin-right: 15px;
}
.timeSet {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  padding: 12px;
  background-color: #fff;
}
</style>  
<style>
.factorSapn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* 修改信息窗体样式 */
.mapBox .amap-info-content {
  /* background: #6778aa;
  border-color: #6778aa;
  color: #fff; */
  border-radius: 4px;
  box-shadow: 1px 1px 10px #8c8c8c;
}

.stationMonitor .el-table--border::after,
.stationMonitor .el-table::before {
  background-color: transparent;
}

.modelBtn {
  float: right;
  /* display: inline-block; */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #1159ec;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}
.modelBtn i {
  font-size: 20px;
  color: #fff;
}
.search .el-input__inner {
  border-radius: 50px;
  height: 32px;
  line-height: 32px;
  border: none;
  padding-left: 8px;
}
.search .el-icon-close {
  position: relative;
  right: 12px;
}
</style>
